<template>
    <div class="home">
        <el-container>
            <el-aside class="aside" :style="{ width: isCollapse == true ? '64px' : '200px' }">
                <div>
                    <img src="../../public/login.png" />
                </div>
                <div>
                    <el-button type="primary" :icon="Search" circle v-model="isCollapse" @click="upisCollapse" />

                </div>
                <el-menu default-active="/home" router class="el-menu-vertical-demo" :collapse="isCollapse">
                    <el-menu-item index="index">
                        <el-icon>
                            <House />
                        </el-icon>
                        <template #title>首页</template>
                    </el-menu-item>
                    <el-sub-menu index="wedding">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>婚纱管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="picture"><el-icon>
                                    <User />
                                </el-icon>全部婚纱</el-menu-item>
                            <el-menu-item index="type"><el-icon>
                                    <User />
                                </el-icon>类别管理</el-menu-item>
                        </el-menu-item-group>

                    </el-sub-menu>
                    <el-sub-menu index="usermanagement">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="usermanagement"><el-icon>
                                    <User />
                                </el-icon>用户管理</el-menu-item>

                        </el-menu-item-group>

                    </el-sub-menu>
                    <el-menu-item index="Information">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <template #title>消息管理</template>
                    </el-menu-item>

                </el-menu>


            </el-aside>
            <el-container>
                <el-header class="header">
                    <div id="title">知否知否后台管理系统</div>
                    <div id="userinfo">
                        <p>管理员</p>
                        <el-dropdown :hide-on-click="false">
                            <span class="el-dropdown-link">
                                <el-icon class="el-icon--right"><arrow-down /></el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>查看资料</el-dropdown-item>
                                    <el-dropdown-item>退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '@/router';
const isCollapse = ref(false)
function upisCollapse() {
    isCollapse.value = !isCollapse.value
}
// 页面跳转
let kf = () => {
    router.push({
        path: 'information'
    })
}
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;

    .header {
        height: 10vh;
        border-bottom: 1px solid #ccc;
        color: #000000;
        display: flex;
        justify-content: space-between;
        align-items: center;

        #title {
            font-size: 30px;
        }

        #userinfo {
            display: flex;
            justify-content: space-between;
            font-size: 15px;
            color: #545454
        }
    }

    .aside {
        width: 15%;
        height: 100vh;
        border-right: 1px solid #ccc;

        .left-tit {
            background-color: aqua;
        }

        img {
            width: 30%;
            position: relative;
            left: 35%;
        }

    }
}
</style>